<template>
  <div class="file-container">
    <div class="file-left">
      <div class="line"></div>
      <div class="items">
        <div :class="['item', {'active':showContentIndex === 1}]" @click="handleItem1">
          <div class="icon-img icon-img1"></div>
          合成配音
        </div>
        <div :class="['item', {'active':showContentIndex === 2}]" @click="handleItem2">
           <div class="icon-img icon-img2"></div>
           背景音乐
        </div>
        <div :class="['item', {'active':showContentIndex === 3}]" @click="handleItem3">
           <div class="icon-img icon-img3"></div>
           景区文本
        </div>
        <div class="line-col"></div>
      </div>
    </div>
    <div class="file-right">
      <div class="line"></div>
      <div class="content">
        <file-contant1 v-if="showContentIndex === 1"></file-contant1>
        <file-contant2 v-else-if="showContentIndex === 2"></file-contant2>
        <file-contant3 v-else></file-contant3>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  @import '../../../assets/less/file';
</style>

<script>
import FileContant1 from './file1'
import FileContant2 from './file2'
import FileContant3 from './file3'
export default {
  data () {
    return {
      showContentIndex: 1
    }
  },
  components: {
    FileContant1,
    FileContant2,
    FileContant3
  },
  methods: {
    handleItem1 () {
      this.showContentIndex = 1
      document.querySelector('.line-col').style.transform = 'translateY(0px)'
    },
    handleItem2 () {
      this.showContentIndex = 2
      document.querySelector('.line-col').style.transform = 'translateY(210px)'
    },
    handleItem3 () {
      this.showContentIndex = 3
      document.querySelector('.line-col').style.transform = 'translateY(420px)'
    }
  }
}
</script>
